<template>
    <div class="rinUp">
      <div class="head-portrait">
        <img src="../assets/logo.png" alt="">
      </div>
      <app-loading :isHidLoading="isHidLoading"></app-loading>
      <div class="user">
        <div class="userName">
          <input type="text" v-model.trim="userId"
                 maxlength="11" placeholder="请输入账号">
        </div>
        <div class="pas">
          <input :type="pasIpt" v-model.trim="userPas" placeholder="请输入密码">
          <div class="pas-load">
            <input type="checkbox" id="pas"
                   :checked="pasChe"
                   @change="pasCheFn">
            <label for="pas">
              <img :src="pasImg" alt="" >
              <span></span>
            </label>
            <router-link to="/" tag="span">忘记密码</router-link>
          </div>
        </div>
        <div class="enter-ipt">
          <span @click="ringUpFn" @keydown.13="ringUpFn">登录</span>
        </div>
        <router-link tag="div" to="/register/login" class="login">
          <span>新用户注册</span>
        </router-link>
      </div>
      <!--弹框-->
      <message :theme=messageTheme :message.sync="messageShow">
        <span>{{cancelHint}}</span>
      </message>
    </div>
</template>

<script>
    export default {
        name: "ringUp",
        data(){
          return{
            userId:'',
            userPas:'',
            cancel:false,
            cancelHint:'账号或密码输入错误',
            pasIpt:'password',
            pasImg:require('../assets/ele-down.png'),
            pasChe:false,
            userIdBool:false,
            userPasBool:false,
            code:1,
            messageTheme:1,
            messageShow:false,
            isHidLoading:false
          }
        },
        watch:{
          userId(){
            /^1[35789][0-9]{9}$/.test(this.userId) ? this.userIdBool = true : this.userIdBool = false;
          },
          userPas(){
            this.userPas.length<6?this.userPasBool = false : this.userPasBool = true;
          }

        },
       methods:{
        pasCheFn(){

          this.pasChe = !this.pasChe;
          if(this.pasChe){
            this.pasImg = require('../assets/ele-on.png');
            this.pasIpt = 'text';
          }else {
            this.pasImg = require('../assets/ele-down.png');
            this.pasIpt = 'password';
          }
        },
         ringUpFn(){
           let _this = this;
           this.userIdBool||(this.messageTheme = 2)&&(this.messageShow = true);
            if(!this.userPasBool){
              return false;
            }
          this.isHidLoading = true;
           if(this.userIdBool){
             //向后台发数据 电话号码和密码
             this.$http.post('/api/user',{
               telNumber:this.userId,
               password:this.userPas
             }).then(req=>{
               console.log(req);
               if(req.data.code===1){
                 this.messageShowFn(1,req.data.msg);
                 setTimeout(function () {
                   _this.$_store.set('userId',req.data.data._id);
                   _this.$_store.set('userTel',req.data.data.telNumber);
                   _this.$router.push({name:'home',params:{register:true}});
                 },800);
               }else if(req.data.code===-2){
                 this.messageShowFn(2,'该用户未注册');
               }else if(req.data.code===-1){
                 this.messageShowFn(2,req.data.msg);
               }
             });
           }
         },
         messageShowFn(theme, msg){
           this.isHidLoading = false;
           this.messageTheme = theme;
           this.cancelHint = msg;
           this.messageShow = true;
         }
      }
    }
</script>

<style scoped>
  .head-portrait{
    height: 200px;
    width: 100vw;
    text-align: center;
  }
  .head-portrait>img{
    width: 180px;
    height: 180px;
    border-radius: 50%;
    margin-top: 10px;
  }
  .user{
    width: 100vw;
    box-sizing: border-box;
    padding: 0 50px;
  }
  .userName,.pas{
    margin-top: 40px;
    width: 100%;
    border-bottom: 1px solid #ccc;
    line-height: 100px;
  }
  input{
    user-select: text;
    border: none;
    outline: none;
    height: 99px;
    caret-color: #5f5f5f;
    font-size: 38px;
    color: #333333;
  }
  input::placeholder{
    color: #9a9a9a;
    font-size:36px;
  }
  .pas-load{
    width: 220px;
    height: 80px;
    float: right;
    display: inline-block;
    vertical-align: middle;
  }
  .pas>input{
    width: 65%;
  }
  .pas-load>span{
    font-size: 30px;
    color: #646464;
    vertical-align: middle;
    padding-left: 20px;
  }
  .pas-load>label>img{
    width: 40px;
    padding-right:20px;
    vertical-align: middle;
  }
  .pas-load>label>span{
    display: inline-block;
    height: 30px;
    width: 1px;
    border-right: 1px solid #ccc;
    vertical-align: middle;
  }
  #pas {
    display: none;
  }
  .enter-ipt{
    width: 100%;
    margin-top: 100px;
    text-align: center;
  }
  .enter-ipt>.enter-active{
    background: #6fd17f;
  }
  .enter-ipt>span{
    display: inline-block;
    width: 90%;
    height: 90px;
    line-height: 90px;
    background: linear-gradient(to left,#31e07c,#1cd245);
    color: #fff;
    font-size: 36px;
    border-radius: 50px;
  }
  .login{
    height: 110px;
    line-height: 110px;
    width: 100%;
    box-sizing: border-box;
    text-align: right;
  }
  .login>span{
    font-size: 30px;
    color: #575757;
  }
</style>
